<template>
  <section class="page interface-edit-page">
    <div class="action">
        <Button type="primary" @click="saveInterface">保存</Button>
    </div>
    <Form class="interface-form" ref="interfaceForm" :model="interfaceModel" :rules="interfaceRules" :label-width="80">
      <FormItem prop="name" label="接口名称">
        <Input type="text" v-model="interfaceModel.name" placeholder="请输入接口名称">
        </Input>
      </FormItem>
      <FormItem prop="name" label="接口描述">
        <Input type="textarea" v-model="interfaceModel.describe" placeholder="请输入接口名称">
        </Input>
      </FormItem>
      <FormItem prop="url" label="接口地址">
        <Input type="text" v-model="interfaceModel.url" placeholder="请输入接口名称">
        </Input>
      </FormItem>
      <FormItem prop="method" label="请求方式">
        <Select v-model="interfaceModel.method" style="width:200px">
          <Option v-for="item in queryMethods" :value="item" :key="item">{{ item }}</Option>
        </Select>
      </FormItem>
      <FormItem prop="requestParams" label="请求参数">
        <Table ref="requestParamsTable" border :columns="requestColumns" :data="interfaceModel.requestParams"></Table>
        <a @click="addRequestParam">新增参数</a>
      </FormItem>
       <FormItem prop="requestDemo" label="请求示例">
        <Input type="textarea" v-model="interfaceModel.requestDemo" :rows="5" placeholder="请求示例">
          </Input>
      </FormItem>
      <FormItem prop="responseParams" label="返回参数">
        <Table ref="responseParamsTable" border :columns="responseColumns" :data="interfaceModel.responseParams"></Table>
        <a @click="addResponseParam">新增参数</a>
      </FormItem>
      <FormItem prop="responseDemo" label="返回示例">
        <Input type="textarea" v-model="interfaceModel.responseDemo" :rows="5" placeholder="返回示例">
          </Input>
      </FormItem>
    </Form>
    {{interfaceModel}}
  </section>
</template>

<script>
  import { Interfaces } from '/imports/collections'

  export default {
    name: 'edit-interface',
    props: {
      id: String,
      catalogId: String
    },
    data () {
      return {
        parentId: '',
        interfaceModel: {
          name: '',
          describe: '',
          url: '',
          method: '',
          requestParams: [],
          requestDemo: '',
          responseParams: [],
          responseDemo: ''
        },
        requestColumns: [{
          title: '参数名',
          key: 'name',
          width: 150,
          render: this.inputRender
        }, {
          title: '类型',
          key: 'type',
          width: 150,
          align: 'center',
          render: this.inputRender
        }, {
          title: '必选',
          key: 'required',
          align: 'center',
          render: this.checkBoxRender
        }, {
          title: '备注',
          key: 'mark',
          render: this.inputRender
        }, {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.updateRequestTableData()
                    this.interfaceModel.requestParams = this.interfaceModel.requestParams.filter((x, index) => index !== params.index)
                  }
                }
              }, '删除')
            ])
          }
        }],
        responseColumns: [{
          title: '参数名',
          key: 'name',
          width: 150,
          render: this.inputRender
        }, {
          title: '类型',
          key: 'type',
          width: 150,
          align: 'center',
          render: this.inputRender
        }, {
          title: '备注',
          key: 'mark',
          render: this.inputRender
        }, {
          title: '操作',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.updateResponseTableData()
                    this.interfaceModel.responseColumns = this.interfaceModel.responseColumns.filter((x, index) => index !== params.index)
                  }
                }
              }, '删除')
            ])
          }
        }],
        queryMethods: ['GET', 'POST', 'PUT', 'DELETE'],
        interfaceRules: {}
      }
    },
    methods: {
      inputRender: (h, { column: { key }, row }) => {
        return h('Input', {
          props: {
            type: 'text',
            size: 'small',
            width: '500px',
            value: row[key]
          },
          on: {
            'input': (value) => {
              row[key] = value
            }
          }
        })
      },
      checkBoxRender: (h, { column: { key }, row }) => {
        return h('Checkbox', {
          props: {
            type: 'text',
            size: 'small',
            width: '500px',
            value: row[key]
          },
          on: {
            'on-change': (value) => {
              row[key] = value
            }
          }
        })
      },
      addRequestParam () {
        this.updateRequestTableData()
        this.interfaceModel.requestParams.push({})
      },
      addResponseParam () {
        this.updateResponseTableData()
        this.interfaceModel.responseParams.push({})
      },
      updateRequestTableData () {
        this.interfaceModel.requestParams = this.$refs.requestParamsTable.rebuildData
        .map((x) => ({
          name: x.name || '',
          type: x.type || '',
          required: !!x.required,
          mark: x.mark || ''
        }))
      },
      updateResponseTableData () {
        this.interfaceModel.responseParams = this.$refs.responseParamsTable.rebuildData
        .map((x) => ({
          name: x.name || '',
          type: x.type || '',
          required: !!x.required,
          mark: x.mark || ''
        }))
      },
      /**
       * 保存接口信息
       */
      saveInterface () {
        this.updateRequestTableData()
        this.updateResponseTableData()
        let data = Object.assign({}, this.interfaceModel)
        console.log(data)
        this.$refs.interfaceForm.validate((valid) => {
          // 验证失败
          if (!valid) { return }

          if (this.id) {
            Interfaces.udpate(this.id, {
              $set: {
                name: this.interfaceModel.name,
                data: data
              }
            }, this.saveCallback)
          } else {
            Interfaces.insert({
              name: this.interfaceModel.name,
              type: 1,
              projectId: this.$route.params.projectId,
              data: data,
              parentId: this.catalogId,
              creator: this.$store.state.user.id
            }, this.saveCallback)
          }
        })
      },
      saveCallback (error, result) {
        if (error) {
          this.$Message.error('操作失败')
          return
        }
  
        this.$Message.success('操作成功')
      }
    },
    mounted () {
      // this.parentId = this.$router.params.parentId
    }
  }
</script>

<style scoped>
  .interface-form {
    padding: 20px;
  }

</style>
